<template>
	<view class="detail-main">
		<view class="main">
			<view class="box">
				<view class="part">
					<view class="text">编号：</view>
					<view class="input">
						<input type="text" v-model="model.c_id">
					</view>
				</view>
				<view class="part">
					<view class="text">姓名：</view>
					<view class="input">
						<input type="text" v-model="model.c_name">
					</view>
				</view>
				<view class="part">
					<view class="text">性别：</view>
					<view class="input">
						<!-- 					<input type="text" v-model="model.c_sex"> -->
						<radio-group @change="radioChange">
							<label class="radio-group">
								<radio class="radio" value="1" :checked="model.c_sex === 1"><text>男</text></radio>
								<radio class="radio" value="0" :checked="model.c_sex === 0"><text>女</text></radio>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="part">
					<view class="text">电话：</view>
					<view class="input">
						<input type="text" v-model="model.c_phone">
					</view>
				</view>
				<view class="part">
					<view class="text">地址：</view>
					<view class="input">
						<input type="text" v-model="model.c_address">
					</view>
				</view>
				<view class="part">
					<view class="text">年龄：</view>
					<view class="input">
						<input type="text" v-model="model.c_age">
					</view>
				</view>
				<view class="imgview">照片：点击添加</view>
				<view class="imgview2"><image class="img" @tap="imgClick" :src="imgsrc" width="100%" height="100%" mode="aspectFit"></image></view>
				<view class="part1">

				</view>
				<button type="primary" @tap="saveClick">{{type}}</button>
<!-- 				<button type="primary" @tap="saveClick(model.AutoID)">{{type}}</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			model: Object,
			type: {
				type: String,
				default: '编辑'
			},
		},
		data() {
			return {
				imgsrc:'../../static/image/takephone.png'
			}
		},
		onLoad(options) {
			// console.log(options);
			// if (options.c_id) {
			// 	this.customerid = options.c_id
			// }
			const eventChannel = this.getOpenerEventChannel()
			// 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			eventChannel.on('send', (data) => {
				console.log(data);
				this.model.AutoID = data.AutoID
				// this.model = data
				if (this.model.AutoID) {
					this.fetch(this.model.AutoID)
				}
			});
			// uni.$on() 在里面要使用临时变量var _this = this;
			// let _this = this
			// uni.$on('update', (data) => {
			// 	console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg);

			// 	this.msg = data.msg;


			// })

		},
		onUnload() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.off('send');
			// uni.$off('send')
		},
		methods: {
			imgClick() {
				const _this = this
				uni.chooseImage({
					count:2,
					sizeType:['original','compressed'],
					sourceType:['album'],
					success:function(res){
						console.log(JSON.stringify(res.tempFilePaths))
						_this.imgsrc = res.tempFilePaths[0]
						// 直接上传图片
						uni.uploadFile({
							url:`${_this.apiUrl}/user/upload`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData:{
								'user':'test'
							},
							success:(uploadFileRes)=> {
								console.log(uploadFileRes.data)
								_this.imgsrc = JSON.parse(uploadFileRes.data).data
							}
						})
						
					}
				})
			},
			radioChange(evt) {
				console.log(evt.detail.value)
				this.model.c_sex = evt.detail.value
			},
			saveClick(id) {
			if (this.model && this.model.AutoID) {
				console.log('编辑模式')
				//触发一个更新事件
				this.$emit('edit-click',this.model)
			} else {
				console.log('新增模式')
				this.$emit('add-click',this.model)
			}},
			addClick() {
		console.log(id)
			uni.request({
				url: `${this.apiUrl}/rest/ad/`,
				method: 'POST',
				data: {
					id: this.model.AutoID,
					...this.model
				},
				success: (res) => {
					console.log(res)
					if (res.data.code === 200) {
						uni.showToast({
							title: res.data.message,
							icon: 'success'
						})
					}
				},
				fail: () => {
		
				},
				complete: () => {
		
				}
			})		
			},
			editClick() {
			console.log(id)
				uni.request({
					url: `${this.apiUrl}/rest/ad/${id}`,
					method: 'PUT',
					data: {
						id: this.model.AutoID,
						...this.model
					},
					success: (res) => {
						console.log(res)
						if (res.data.code === 200) {
							uni.showToast({
								title: res.data.message,
								icon: 'success'
							})
						}
					},
					fail: () => {

					},
					complete: () => {

					}
				})	
			},
			fetch(id) {
				uni.request({
					url: `${this.apiUrl}/rest/ad/${id}`,
					method: 'GET',
					data: {},
					success: (res) => {
						this.model = Object.assign({}, this.model, res.data);
						console.log(this.items)
					},
					fail: () => {

					},
					complete: () => {

					}
				})
			},
		}
	}
</script>

<style>
	.imgview2 {
		text-align: center;
	}
	.img{
		
		border: 1px solid #CCCCCC;
		border-radius: 10px;
		width:260px;
		height:150px;
	}
	.imgview{
		height: 60px;
		display: flex;
		align-items: center;
		
	}
	.radio-group {
		/* 	text-align: left; */
	}

	.radio {
		width: 200rpx;

	}

	.text {
		font-size: large;
		width: 20%;
		display: flex;
		align-items: center;
		/* 		flex-direction: column;
		justify-content: center; */
	}

	.input {
		font-size: large;
		border: 1rpx solid #EEEEEE;
		/* 	height: 50rpx; */
		margin: 0 10rpx;
		/* 	line-height: 50rpx; */
		color: red;
		width: 80%;
		display: flex;

		justify-content: center;
		align-items: center;
	}

	.part {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 40px;
		border-bottom: #C0C0C0 1px solid;
	}

	.part1 {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 40px;
		border-bottom: #C0C0C0 1px solid;
	}

	.box {
		width: 90%;
		/* 		height: 200px;
		background-color:#007AFF; */
	}

	.main {
		display: flex;
		justify-content: center;
		width: 100%;
	}
</style>
